<template>
	<view>
		<comHeader :config="navConfig" />
		<view class="main">
			<view class="floatleft lineboerder">
				<view class="linetitle">餐桌类型</view>
				<view class="linetitle">等待餐桌</view>
				<view class="linetitle">预计等待</view>
			</view>
			<view class="floatleft" v-for="(info,index) in datalist" :key="index">
				<view class="foreachpadding">{{info.title}} <text class="ofclass">{{info.numberof}}</text> </view>
				<view class="foreachpadding"> <text class="zhuocolor">{{info.numberdata}}</text> <text class="ofclass">卓</text>
				</view>
				<view class="foreachpadding"> <text class="timecolor">{{info.time}}</text> <text class="ofclass">分钟</text> </view>
			</view>
			<view class="ways">
				<view class="waysbor">
					<view class="waysmain">
						<view>就餐人数</view>
						<view class="waysmaininput"><input class="nameinput" type="text" placeholder="请输入人数"></view>
					</view>
					<view class="waysmain">
						<view>联系人 </view>
						<view class="cantact"><input type="text" placeholder="张"></view>
						<view class="gender">
							<view class="genderstyle" @click="maam" :class="{'genderstyleback' : maamselected==true }"></view>
							<view style="margin-right:35upx;" @click="maam">女士</view>
							<view class="genderstyle" @click="sir" :class="{'genderstyleback' : sirselected==true }"></view>
							<view @click="sir">先生</view>
						</view>
					</view>
					<view class="waysmain" style="border: none;">
						<view class="phoneheader">+86</view>
						<view class="phoneinput"><input type="text" placeholder="请输入手机号"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="botmBox">
			<view class="botmBtn" @tap="reservation">
				<view>立即订座</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maamselected: false,
				sirselected: false,
				datalist: [{
						title: "大桌",
						numberdata: "2",
						time: "1",
						numberof: "(1-4人)"
					},
					{
						title: "大桌",
						numberdata: "2",
						time: "1",
						numberof: "(1-4人)"
					},
				],
				navConfig: {
					isFixed: false,
					comScroll: 0,
					left: {
						text: '',
						isShowLeft: true,
						leftGobackColor: '#ffffff',
						leftTextColor: '',
					},
					mid: {
						isShowMid: true,
						text: '新韩小馆烤肉'
					},
					right: {
						text: '',
						isShowRight: false,
					}
				},
			}
		},
		methods: {
			maam() {
				this.sirselected = false
				this.maamselected = true
			},
			sir() {
				this.maamselected = false
				this.sirselected = true
			},
			reservation(){
				uni.navigateTo({
					url:"lineNumbing"
				})
			}
		},
		
	}
</script>

<style>
	.main {
		width: 90%;
		margin: auto;
		padding-top: 150upx;
		padding-bottom: 150upx;
	}

	.floatleft {
		width: 100%;
		display: flex;
		text-align: center;
		font-size: 26upx;
	}

	.lineboerder {
		border-top: 10upx solid #F5F5F5;
		border-bottom: 1px solid #DCDCDC;
	}

	.linetitle {
		width: 33%;
		padding: 47upx 0upx 26upx 0upx;
	}

	.foreachpadding {
		width: 33%;
		padding: 40upx 0upx 0upx 0upx;
	}

	.zhuocolor {
		color: #1965C5;
	}

	.ofclass {
		color: #999999;
	}

	.ways {
		width: 100%;
		margin-top: 96upx;
		border-radius: 30upx;
		font-size: 30upx;
		box-shadow: 0px 0px 10px 6px #f1f3fe;
	}

	.waysbor {
		width: 85%;
		margin: auto;
	}

	.waysmain {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #D2D2D2;
		padding: 35upx 0upx;
	}

	.waysbor:last-child {
		border: none;
	}

	.waysmaininput {
		width: 150upx;
	}

	.cantact {
		width: 40upx;
	}

	.phoneheader {
		border-right: 1px solid #D2D2D2;
		padding-right: 50upx;
	}

	.nameinput {
		width: 160upx;
	}

	.gender {
		display: flex;
		align-items: center;
	}

	.genderstyle {
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		border: 1px solid #999999;
		margin-right: 8upx;
		padding-top: 2upx;
	}

	.genderstyleback {
		background:url(../../../static/selectionok.png);
		background-size: 31upx 31upx;
		background-position: center;
		border: 0px solid #999999;
	}

	.botmBox {
		background: #FFFFFF;
		padding: 20upx 0;
		width: 100%;
		position: fixed;
		bottom: 0upx;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.botmBtn {
		width: 714upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 80upx;
		box-shadow: 0px 0px 27px 0px rgba(5, 36, 72, 0.15);
		background: linear-gradient(to bottom, #4C89D8, #2A60BA);
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 10upx 0upx;
		box-sizing: border-box;
		text-align: center;
	}

	.botmBtn>view {
		font-size: 28upx;
	}
</style>
